<template>
  <div class="right-panel" :class="{'disabled': disabled}" >
    <form-create
    ref="attribute"
      :rule="attributesRules"
      :option="attributesOptions"
      @change="onValueChange"
    />
  </div>
</template>

<script>
import Vue from 'vue'
import formCreate from '@form-create/ant-design-vue'
import { buildAttributeForm } from './util/Attribute-Form-Create-Rules-Builder'
Vue.use(formCreate)

/**
 * 右侧表单区域
 */
export default {
  name: 'AttributeForm',
  data () {
    return {
      // 基础属性表单配置rules
      attributesRules: [],
      // 基础属性表单配置项
      attributesOptions: {
        resetBtn: false,
        submitBtn: false
      }
    }
  },
  props: {
    options: { type: Array},
    disabled: {type: Boolean, default: false}
  },
  watch: {
    options() {
      if(this.options) {
        this.generateAttributeForm(this.options)
      }
    }
  },
  methods: {
    /**
     * 生成基础属性Form表单
     */
    generateAttributeForm (options) {
      const rules = buildAttributeForm(options)
      this.attributesRules = rules
    },
    /**
     * 基础属性编辑器表单数据变更处理
     */
    onValueChange (field, value) { 
      if(this.options) {
        this.options.forEach((option) => {
          if (option.name === field) {
            option.oldValue = option.value;
            option.value = value
            this.$emit('onValueChange', option)
          }
        })
      }
    }
  },
  mounted () {
    // 构建属性编辑器Form
    if (this.options) {
      this.generateAttributeForm(this.options)         
    }
  }
}
</script>
<style lang="scss" scoped>
.disabled {
  pointer-events: none
}
.right-panel {
  text-align: center;
  height: 100%;
  border: 1px solid #d9d9d9;
  background: #f5f5f5;
  overflow: hidden;
  padding: 24px;
  /deep/ .form-create .ant-form-item {
    margin-bottom: 5px !important;
  }
  /deep/ .ant-form-item-control-wrapper {
    text-align: left
  }
}
</style>